<template>
	<view>
		<view class="mySwiperIcon" :style="{
			'flex-direction': config.flexDirection == 1 ? 'row-reverse' : 'row',
		}">
			<view :style="{
				'width': config.swiperWidth,
				'margin-right': config.swiperWidth == 0 ? 0 : config.flexDirection == 1 ? 0 : config.gap ,
				'margin-left': config.swiperWidth == 0 ? 0 : config.flexDirection == 1 ? config.gap : 0 ,
			}" v-if="config.swiperType == 1">
				<u-swiper 
					:list="config.swiperList" 
					keyName="image" 
					:indicator="config.indicator == 1 ? true : false"
					:indicatorMode="config.indicatorMode" :circular="true"
					:showTitle="config.showTitle == 1 ? true : false" 
					:autoplay="config.autoplay == 1 ? true : false"
					:interval="config.interval" 
					:radius="config.swiperRadius" 
					@click="swiperClick" 
					height="130"
					></u-swiper>
			</view>
			<view class="iconShow" 
				:class="config.iconShowMode == 1 ? 'iconShowMode1' : config.iconShowMode == 2 ? 'iconShowMode2' : ''">
				<view class="showItem" v-for="(item, index) in config.iconList" :key="index"
					@click="iconShowClick(item.url)" :style="{
						'border-radius': config.iconRadius,
					}">
					<div class="showImg" >
						<img :src="item.icon" alt="">
					</div>
					<view class="showTitle" :style="{
						'color': config.iconColor,
						'font-size': config.fontSize,
					}">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "diy-swiper-icon",
	data() {
		return {
			list: [],
			config: {
				swiperList: [
					{ image: 'https://file.moxikeji.net/images/mp/images/l1sc1.jpg', url: '', title: '标题1' },
				],
				iconList: [
					{ icon: 'https://file.moxikeji.net/images/mp/images/rt1.jpg', title: '相册', url: '/pages/index/index' },
					{ icon: 'https://file.moxikeji.net/images/mp/images/rt2.jpg', title: '视频', url: '/pages/index/index' },
					{ icon: 'https://file.moxikeji.net/images/mp/images/rt3.jpg', title: '通信', url: '/pages/index/index' },
					{ icon: 'https://file.moxikeji.net/images/mp/images/rt4.jpg', title: '微信备份', url: '/pages/index/index' },
				],
				swiperType: 1, // 是否展示轮播图，1 展示， 0 不展示
				flexDirection: 0, // 排列顺序, 0 row为顺序，1 row-reverse为倒序
				showTitle: 0, // 是否显示标题
				swiperWidth: '60%', // 轮播组件宽度
				gap: '10rpx', // 中间间距
				autoplay: 1,//是否自动切换
				interval: 3000,//循环间隔时间

				indicator: 1,//是否显示指示器
				indicatorMode: 'line',//指示器样式，可选：dot

				// 圆角设置
				swiperRadius: '10rpx',
				iconRadius: '10px',

				iconColor: '#333',//图标颜色
				fontSize: '12px',

				iconShowMode: '2', // 控制每行展示多少 1 一行一个， 2 一行两个， 其余任意数值 一行四个
			}
		};
	}, props: {
		set: {
			type: Object,
			default: () => ({})
		}
	}, created() {
		for (let k in this.set.swiperList) {
			if (this.set.swiperList[k]['type'] == 'video') {
				this.set.swiperList[k]['src'] = this.set.swiperList[k]['src_video'];
			}
			this.list.push(this.set.swiperList[k])
		}
		this.config = Object.assign(this.config, this.set)
	}
	, methods: {
		// 轮播点击路由事件
		swiperClick(k) {
			console.log(this.config.swiperList[k].url);
			
			if (this.config.swiperList[k] && this.config.swiperList[k].url.length) {
				uni.navigateTo({ url: this.config.swiperList[k].url })
			}
		},
		iconShowClick(url) {
			if (url.length) {
				uni.navigateTo({ url: url })
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.mySwiperIcon {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;

	.iconShow {
		flex: 1;

		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		gap: 20rpx;

		.showItem {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-size: 100% 100%;

			.showImg {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 4px;

				img {
					width:50%;
					aspect-ratio: 1/1;
					height: auto;
				}
			}

			.showTitle {

				display: flex;
				justify-content: center;
				align-items: flex-end;

				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.iconShow.iconShowMode1 {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(1, 1fr);
	}

	.iconShow.iconShowMode2 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
}
</style>